import React, { useState } from 'react';
import { Plus } from 'lucide-react';
import { Button } from '../components/ui/Button';
import { SearchInput } from '../components/ui/SearchInput';
import { BoxCard } from '../components/boxes/BoxCard';
import { AddBoxModal } from '../components/boxes/AddBoxModal';
import type { Box, Snack } from '../types';

const MOCK_SNACKS: Snack[] = [
  { 
    id: '1', 
    name: '巧克力', 
    price: 5, 
    stock: 10, 
    image: 'https://images.unsplash.com/photo-1511381939415-e44015466834?w=400',
    description: '黑巧克力'
  },
  { 
    id: '2', 
    name: '薯片', 
    price: 3, 
    stock: 15, 
    image: 'https://images.unsplash.com/photo-1566478989037-eec170784d0b?w=400',
    description: '原味'
  },
  { 
    id: '3', 
    name: '饼干', 
    price: 4, 
    stock: 20, 
    image: 'https://images.unsplash.com/photo-1499636136210-6f4ee915583e?w=400',
    description: '巧克力味'
  },
  { 
    id: '4', 
    name: '糖果', 
    price: 2, 
    stock: 30, 
    image: 'https://images.unsplash.com/photo-1581798459919-5c8dd45f51c7?w=400',
    description: '混合口味'
  },
];

const MOCK_BOXES: Box[] = [
  {
    id: '1',
    roomNumber: '101',
    name: '甜点角',
    snacks: [MOCK_SNACKS[0], MOCK_SNACKS[1]]
  },
  {
    id: '2',
    roomNumber: '102',
    name: '零食天堂',
    snacks: [MOCK_SNACKS[2]]
  },
];

export default function BoxManagement() {
  const [searchTerm, setSearchTerm] = useState('');
  const [boxes] = useState<Box[]>(MOCK_BOXES);
  const [isAddModalOpen, setIsAddModalOpen] = useState(false);

  const filteredBoxes = boxes.filter(box => 
    box.roomNumber.toLowerCase().includes(searchTerm.toLowerCase()) ||
    box.name.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h1 className="text-2xl font-bold">盒子管理</h1>
        <Button icon={Plus} onClick={() => setIsAddModalOpen(true)}>
          添加盒子
        </Button>
      </div>

      <SearchInput
        placeholder="搜索盒子..."
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
      />

      <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
        {filteredBoxes.map(box => (
          <BoxCard key={box.id} box={box} />
        ))}
      </div>

      <AddBoxModal
        isOpen={isAddModalOpen}
        onClose={() => setIsAddModalOpen(false)}
        availableSnacks={MOCK_SNACKS}
      />
    </div>
  );
}